<template>
	<view class="agent-type">
	    <view class="agent-title">
			请选择您要发布的类型
		</view>
		<view class="agent-warp">
			<view :class="isSeleactIndex===key?'agent-item active':'agent-item'"  v-for="(item,key) in agentType" :key='key'>	
				<view class="agent-image" @click="handleSelectType(key,item)">
					<image v-show="isSeleactIndex===key" :src="item.activeUrl"></image>
					<image v-show="isSeleactIndex!==key" :src="item.url"></image>
				</view>
				 <view class="agent-label">
				 {{item.name}}
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agentType:[
					{
						name:'政府/政府部门',
						url:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/agent/img1.png',
						activeUrl:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/agent/img1-sel.png',
						value:1
					},
					{
						name:'开发园区',
						url:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/agent/img2.png',
						activeUrl:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/agent/img2-sel.png',
						value:2
					},
					{
						name:'投资机构',
						url:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/agent/img3.png',
						activeUrl:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/agent/img3-sel.png',
						value:3
					},
					{
						name:'一般企业',
						url:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/agent/img6.png',
						activeUrl:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/agent/img6-sel.png',
						value:4
					},
					{
						name:'科研院所',
						url:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/agent/img4.png',
						activeUrl:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/agent/img4-sel.png',
						value:5
					},
					{
						name:'其他',
						url:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/agent/img7.png',
						activeUrl:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/agent/img7-sel.png',
						value:7
					}
				],
				isSeleactIndex:0
			}
		},
		methods: {
			//tap类型
			handleSelectType(key,item){
				this.isSeleactIndex = key;
				console.log(this.agentType)
				console.log('key',key)
				console.log(this.agentType[key])
				// uni.navigateTo({
				// 	url:'../agent-verify/agent-verify?companyType='+this.agentType[key].value
				// })
			}
		}
	}
</script>

<style scoped lang='scss'>
.agent-type {
	box-sizing: border-box;
	padding: 78upx 126upx 20upx 126upx;
	border-top: 2upx solid #F5F5F5;
	overflow: hidden;
	.agent-title {
		font-size:34upx;
		font-weight:600;
		color:rgba(51,51,51,1);
		line-height:48upx;
		text-align: center;
		box-sizing: border-box;
		position: relative;
		z-index: 999;
	}
	.agent-title:before{
		content: '';
		display: block;
		width:338upx;
		height:20upx;
		background:rgba(233,242,254,1);
		position: absolute;
		bottom: -2upx;
		left: 50%;
		transform: translateX(-50%);
		z-index: -1;
	}
	.agent-warp {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 70upx;
		box-sizing: border-box;
		.active {
			.agent-label{
				font-weight:500!important;
				color:#333333!important;
			}
			.agent-image {
				background-color: #F3F7FF!important;
			}
		}
		.agent-item {
			margin-bottom: 50upx;
			box-sizing: border-box;
			.agent-image {
				width:170upx;
				height:170upx;
				background:#FAFAFA;
				border-radius: 50%;
				text-align: center;
				line-height: 200upx;
			}
			.agent-label {
				text-align: center;
				font-size:28upx;
				font-weight:400;
				color:rgba(74,74,74,1);
				margin-top: 10upx;
			}
			
		}
		.agent-item:nth-child(1){
			.agent-image{
				image {
					width: 64upx;
					height: 64upx;
				}
			}
		}
		.agent-item:nth-child(2){
			.agent-image{
				image {
					width: 72upx;
					height: 57upx;
				}
			}
		}
		.agent-item:nth-child(3){
			.agent-image{
				image {
					width: 64upx;
					height: 64upx;
				}
			}
		}
		.agent-item:nth-child(4){
			.agent-image{
				image {
					width: 60upx;
					height: 63upx;
				}
			}
		}
		.agent-item:nth-child(5){
			.agent-image{
				image {
					width: 72upx;
					height: 72upx;
				}
			}
		}
		.agent-item:nth-child(6){
			.agent-image{
				image {
					width: 68upx;
					height: 63upx;
				}
			}
		}
		.agent-item:nth-child(7){
			.agent-image{
				image {
					width: 60upx;
					height: 60upx;
				}
			}
		}
	}
}
</style>
